<template>
	<view style="height: 282rpx;" class="pl40 mt30 dflex alc jcsb" @click="sendNum">
		<!-- 左边 -->
		<view class="left dflex flexw" style="width: 338rpx;">
			<view class="text dflex alc" v-for="itm in data.classes" :key="itm.cid">
				<view class="bgitem mr10 fs20 white fw500 textc" :style="{ backgroundColor: itm.color }">
					{{ ((itm.value / sum) * 100).toFixed(0) + '%' }}
				</view>
				<view class="fs24 color">{{ itm.name }}</view>
			</view>
		</view>
		<!-- 右边 -->
		<view class="dflex alc jcc" style="height: 282rpx;width: 282rpx;">
			<l-echart ref="chart" @finished="init"></l-echart>
			<view class="textc posia">
				<view class="fs32 fw900 colora">{{ sum }}</view>
				<view class="fs24 gray fw500">单位(张)</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as echarts from 'echarts';
export default {
	props: ['data'],
	data() {
		return {
			option: {
				color: ['#B95DEC', '#3C67E7', '#3DCF7A', '#620FF5', '#EF386E', '#FF8560'],
				tooltip: {
					trigger: 'none'
				},
				series: [
					{
						show: true,
						type: 'pie',
						radius: ['60%', '85%'],
						label: {
							show: false
						},
						data: this.data.classes
					}
				]
			}
		};
	},

	computed: {
		sum() {
			return this.data.classes.reduce((s, el) => {
				return el.value + s;
			}, 0);
		}
	},
	methods: {
		init() {
			this.$refs.chart.init(echarts, chart => {
				chart.setOption(this.option);
			});
		},
		sendNum() {
			this.$emit('getSum', this.sum);
		}
	},
	mounted() {
		this.$refs.chart.init(echarts, chart => {
			chart.setOption(this.option);
		});
	}
};
</script>

<style lang="scss" scoped>
.bgitem {
	width: 64rpx;
	height: 32rpx;
	line-height: 32rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.left .text:nth-child(4) {
	margin-top: 36rpx;
	margin-bottom: 36rpx;
}
.left .text:nth-child(2n + 2) {
	margin-left: 20rpx;
}
</style>
